<template>
  <div class="users">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/users"></el-breadcrumb-item>
      <el-breadcrumb-item>体检文件 </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框功能 -->
    <div>
      <!--
        <el-input placeholder="请输入关键字"
                  v-model="query_data"
                  class="input-with-select">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="search"></el-button>
        </el-input>
      -->
      <el-form :inline="true">
        <el-form-item label="年龄">
          <el-input v-model="ruleform.age" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="学生id">
          <el-input v-model="ruleform.id" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="学生名字">
          <el-input v-model="ruleform.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="系别">
          <el-input
            v-model="ruleform.faculty"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="search" class="search"
          >查询</el-button
        >
        <el-button type="primary" @click="dayin1" class="search"
          >打印</el-button
        >
      </el-form>
    </div>
    <el-table :data="List" style="width: 100%">
      <el-table-column prop="student_id" label="学号"> </el-table-column>
      <el-table-column prop="student_name" label="姓名">
        <!--
          <template slot-scope="scope">
            <img src="../../assets/luntai.png"
                 alt=""
                 style="width: 50px;height: 50px">
          </template>
        -->
      </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="faculty" label="系别"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="height" label="身高"> </el-table-column>
      <el-table-column prop="weight" label="体重"> </el-table-column>
      <el-table-column prop="chest" label="胸围"> </el-table-column>
      <el-table-column prop="create_time" label="日期"> </el-table-column>
      <el-table-column label="操作" width="800px">
        <!-- 自定义这一列的内容，必须指定template -->
        <template slot-scope="scope">
          <el-button size="small" plain type="primary" @click="register(scope);"
            >登记</el-button
          >
          <el-button size="small" plain type="primary" @click="edit(scope);"
            >修改</el-button
          >
          <el-button size="small" plain type="primary" @click="del(scope);"
            >删除</el-button
          >
          <el-button size="small" plain type="primary" @click="tongji"
            >一般统计</el-button
          >
          <el-button size="small" plain type="primary" @click="fenxi"
            >动态分析</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      :page-sizes="[1, 2, 4, 6, 8]"
      background
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:50px"
    >
    </el-pagination>
    <el-dialog
      title="数据"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <div>计数:{studentCount}</div>
      <div>
        平均值:<span>age:{age}</span><span>height:{height}</span
        ><span>weight:{weight}</span><span>chest:{chest}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false;">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false;"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="数据"
      :visible.sync="fenxiDialogVisible"
      width="30%"
      center
    >
      <div id="myChart" :style="{ width: '300px', height: '300px' }"></div>
      <!-- <div>{average}</div> -->
    </el-dialog>
    <!-- 登记表单 -->
    <el-dialog title="登记" :visible.sync="dialogFormVisible_register">
      <el-form :model="dengji_form">
        <el-form-item label="学号">
          <el-input
            v-model="dengji_form.student_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="dengji_form.student_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="dengji_form.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="dengji_form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="dengji_form.height" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="体重">
          <el-input v-model="dengji_form.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="胸围">
          <el-input v-model="dengji_form.chest" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="dengji_form.faculty" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_register = false;"
          >取 消</el-button
        >
        <el-button type="primary" @click="confirm_register">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改表单 -->
    <el-dialog title="修改" :visible.sync="dialogFormVisible_edit">
      <el-form :model="edit_form">
        <el-form-item label="学号">
          <el-input
            v-model="edit_form.student_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input
            v-model="edit_form.student_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="edit_form.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="edit_form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身高">
          <el-input v-model="edit_form.height" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="体重">
          <el-input v-model="edit_form.weight" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="胸围">
          <el-input v-model="edit_form.chest" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学院">
          <el-input v-model="edit_form.faculty" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible_edit = false;">取 消</el-button>
        <el-button type="primary" @click="confirm_edit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// const BASE_URL = 'http://localhost:8888/api/private/v1/'
import axios from "axios";
import { posturl, geturl } from "../../static/js/util.js";
import fileDownload from "js-file-download";
export default {
  data() {
    return {
      item: "",
      centerDialogVisible: false,
      fenxiDialogVisible: false,
      // 查询关键字
      query_data: "",
      // 当前页
      currentPage: 1,
      // 每页显示的条数
      pageSize: 2,
      // 总的条数
      total: 2,
      // 零件列表数据
      List: [{}],
      studentCount: "",
      age: "",
      weight: "",
      height: "",
      chest: "",
      average: "",
      ruleform: {
        id: "",
        age: "",
        faculty: "",
        name: ""
      },
      dengji_form: {
        student_id: "",
        student_name: "",
        sex: "",
        age: "",
        height: "",
        weight: "",
        chest: "",
        faculty: ""
      },
      edit_form: {
        student_id: "",
        student_name: "",
        sex: "",
        age: "",
        height: "",
        weight: "",
        chest: "",
        faculty: ""
      },
      dialogFormVisible_register: false,
      dialogFormVisible_edit: false
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      this.$nextTick(() => {
        myChart.setOption({
          title: { text: "在Vue中使用echarts" },
          tooltip: {},
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: [5, 20, 36, 10, 10, 20]
            }
          ]
        });
      });
    },
    // 获取体检列表信息
    async getList() {
      let res = await axios({
        url: "/physical",
        method: "get",
        params: this.ruleform,
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      if (res.code == 20000) {
        this.List = res.data;
        (this.dengji_form.student_id = res.data.student_id),
          (this.dengji_form.student_name = res.data.student_name),
          (this.dengji_form.sex = res.data.sex),
          (this.dengji_form.age = res.data.age),
          (this.dengji_form.height = res.data.height),
          (this.dengji_form.weight = res.data.weight),
          (this.dengji_form.faculty = res.data.faculty),
          (this.dengji_form.chest = res.data.chest);
        (this.edit_form.student_id = res.data.student_id),
          (this.edit_form.student_name = res.data.student_name),
          (this.edit_form.sex = res.data.sex),
          (this.edit_form.age = res.data.age),
          (this.edit_form.height = res.data.height),
          (this.edit_form.weight = res.data.weight),
          (this.edit_form.faculty = res.data.faculty),
          (this.edit_form.chest = res.data.chest);
      }
      console.log(res, "1116");
    },
    confirm_register() {
      let res = axios({
        url: "/physical",
        method: "post",
        params: this.dengji_form,
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      if ((res.code = 20000)) {
        this.$message.success("登记成功");
        this.dialogFormVisible_register = false;
      }
    },
    dayin1() {
      let res = axios({
        url: "/fileDownload",
        method: "get",
        data: this.ruleform,
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      // location.href = res.data;
      fileDownload(res.data, "dsdasd.xls");
    },
    edit() {
      this.dialogFormVisible_edit = true;
    },
    confirm_edit() {
      let res = axios({
        url: "/physical",
        method: "put",
        params: this.edit_form,
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      if ((res.code = 20000)) {
        this.$message.success("修改成功");
        this.dialogFormVisible_edit = false;
      }
    },
    del(item) {
      let res = axios({
        url: "/deletePhysical",
        method: "get",
        params: {
          id: item.id
        },
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      if ((res.code = 20000)) {
        this.$message.success("删除成功");
        this.getList();
      }
    },
    register(item) {
      this.dialogFormVisible_register = true;
      posturl(
        "/physical",
        {
          studentId: item.student_Id,
          studentName: item.student_name,
          sex: item.sex,
          age: item.age,
          height: item.height,
          weight: item.weight,
          chest: item.chest,
          faculty: item.faculty
        },
        function(res) {
          if ((res.code = 20000)) {
            this.$message.success("登记成功");
            this.getList();
          }
        }
      );
    },
    dayin() {
      let res = posturl({
        url: "/fileDownload",
        data: this.ruleform,
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      if ((res.code = 20000)) {
        this.$message.success("打印成功");
        location.href = res.data;
      }
    },
    tongji() {
      const that = this;
      this.centerDialogVisible = true;
      // this.drawLine();
      let res = axios({
        url: "/average",
        method: "get",
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      if ((res.code = 20000)) {
        (that.studentCount = res.data.studentCount),
          (that.age = res.data.age),
          (that.height = res.data.height),
          (that.weight = res.data.weight),
          (that.chest = res.data.chest);
      }
    },
    fenxi() {
      this.fenxiDialogVisible = true;
      let res = axios({
        url: "/consecutiveMean",
        method: "get",
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      if ((res.code = 20000)) {
        this.average = res.average;
      }
    },
    async search() {
      let res = axios({
        url: "/physical",
        method: "get",
        params: this.ruleform,
        headers: {
          "Content-Type": "x-www-form-urlencoded; charset=UTF-8"
        }
      });
      this.getList();
    },
    handleCurrentChange(val) {
      // val就是当前页
      console.log(val);
      // 修改当前页
      this.currentPage = val;
      // 重新发送ajax请求获取数据
      this.getList();
    },
    // 每页条数发生改变
    handleSizeChange(val) {
      console.log(val);
      // 改变每页条数的时候，需不需要把页码改成1
      this.currentPage = 1;
      this.pageSize = val;
      // 重新渲染
      this.getList();
    }
  },
  mounted() {},
  created() {
    // this.$router : 整个路由对象  routes
    // this.$route : 表示的是当前路由
    // console.log(this.$route.params)
    this.getList();
  }
};
</script>

<style lang="less" scoped>
.el-input {
  width: 140px;
  margin-bottom: 10px;
}
.search {
  margin-bottom: 30px;
}
</style>
